<template>
  <div class="wrap">
    <div class="header">
      <el-row :gutter="0">
        <!-- <el-col :span="12" v-for="(i,index) in btn" :class="{active:index===active}" :key="i" @click="handel(i,index)">
          <div>{{i.title}}</div>
    </el-col> -->

        <router-link
          tag="li"
          style="width: 50%; border-radius: 4px"
          v-for="(i, index) in btn"
          :key="index"
          :to="i.url"
        >
          <div>{{ i.title }}</div>
        </router-link>
      </el-row>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { ElRow } from "element-plus";
import { useRouter } from "vue-router";
export default {
  setup() {
    // const size = ref(-2);
    const btn = ref([
      { title: "基本设置", url: "/index/account/baseAccount" },
      { title: "账号设置", url: "/index/account/userAccount" },
    ]);
    let active = ref(0);
    const router = useRouter();
    return {
      // size,
      btn,
      handel: (i, index) => {
        active.value = index;
        router.push(i.url);
        console.log(active.value);
      },
      active,
    };
  },

  components: {
    ElRow,
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  .header {
    width: 23%;
    background-color: #fff;
    line-height: 42px;
    border-radius: 5px;
    .el-row {
      div {
        font-size: 18px;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
      }
      .active {
        background-color: #d9e2c8;
      }
    }
  }

  .router-link-active {
    background-color: #d9e2c8;
  }
}
</style>
